<template>
  <el-dialog :model-value="true" :title="title" width="50%" @close="emits('close')">
    <el-form ref="formRef" :model="queryParams" label-width="160px" :rules="rules">
      <!-- <el-form-item label="设备号" prop="serialNumber">
        <el-input v-model="queryParams.serialNumber" placeholder="请输入设备号" />
      </el-form-item> -->
      <el-form-item label="设备唯一编码IMEI" prop="serialNumber">
        <el-input v-model="queryParams.serialNumber" placeholder="请输入设备唯一编码IMEI" />
      </el-form-item>
      <el-form-item label="SIM卡号" prop="simNumber">
        <el-input v-model="queryParams.simNumber" placeholder="请输入SIM卡号" />
      </el-form-item>
      <el-form-item label="设备名称" prop="deviceName">
        <el-input v-model="queryParams.deviceName" placeholder="请输入设备名称" />
      </el-form-item>
      <el-form-item label="所属门店" prop="storeId">
        <el-select
          v-model="queryParams.storeId"
          placeholder="请选择所属门店"
          clearable
          remote
          reserve-keyword
          filterable
          remote-show-suffix
          :remote-method="remoteMethod"
          :loading="loading"
        >
          <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <!-- 门店联系方式 storeContractNumber -->
      <el-form-item label="门店联系方式" prop="storeContractNumber">
        <el-input v-model="queryParams.storeContractNumber" placeholder="请输入门店联系方式" />
      </el-form-item>
      <el-form-item label="经度" prop="longitude">
        <el-input v-model="queryParams.longitude" placeholder="请输入经度" />
      </el-form-item>
      <el-form-item label="纬度" prop="latitude">
        <el-input v-model="queryParams.latitude" placeholder="请输入纬度" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="emits('close')">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { on } from 'events'
import { ref, toRefs, onMounted } from 'vue'
import { SofaBasicApi } from '@/api/application/sofa/index'
import * as DeliveryPickUpStoreApi from '@/api/mall/trade/delivery/pickUpStore/index'
const props = withDefaults(
  defineProps<{
    title?: string
    editInfo?: any
  }>(),
  {
    title: '新增设备',
    editInfo: () => {}
  }
)
const formRef = ref<any>(null)
const emits = defineEmits(['close', 'submit'])
const { title } = toRefs(props)
const queryParams = ref({
  serialNumber: '',
  // deviceImei: '',
  simNumber: '',
  deviceName: '',
  storeId: undefined,
  longitude: '',
  latitude: '',
  storeContractNumber: ''
})
const loading = ref(false)
const storeList = ref<any[]>([])

const rules = ref({
  serialNumber: [{ required: true, message: '请输入设备号', trigger: 'blur' }],
  simNumber: [{ required: true, message: '请输入SIM卡号', trigger: 'blur' }],
  deviceName: [{ required: true, message: '请输入设备名称', trigger: 'blur' }],
  storeContractNumber: [
    { required: false, message: '请输入门店联系方式', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (!value) {
          callback()
          return
        }
        const test = /^1[3-9]\d{9}$/
        if (!test.test(value)) {
          callback(new Error('请输入正确手机号'))
          return
        }
        callback()
      }
    }
  ]
})
const remoteMethod = async (query: string) => {
  loading.value = true
  try {
    await getStoreList(query)
  } catch (error) {
    storeList.value = []
  } finally {
    loading.value = false
  }
}
const handleSubmit = () => {
  formRef.value.validate((valid: boolean) => {
    if (valid) {
      emits('submit', { ...queryParams.value, id: props.editInfo.id })
    }
  })
}
function getInfo() {
  Object.assign(queryParams.value, {
    serialNumber: props.editInfo.serialNumber || '',
    simNumber: props.editInfo.simNumber || '',
    deviceName: props.editInfo.deviceName || '',
    storeId: props.editInfo.storeId || undefined,
    longitude: props.editInfo.longitude || '',
    latitude: props.editInfo.latitude || '',
    storeContractNumber: props.editInfo.storeContractNumber || ''
  })
}
const getStoreList = async (name?: string) => {
  const res = await DeliveryPickUpStoreApi.getDeliveryPickUpStorePage({
    pageNo: 1,
    pageSize: 100,
    name: name || ''
  })
  storeList.value = res.list || []
}
onMounted(async () => {
  if (props.editInfo.id) await getStoreList()
  await getInfo()
})
</script>
